<template>
	<view>
		<image class="mytopbg" :style="{ height: (stausBarHeight*1+180) + 'px' }" src="@/static/headtopbg.png"
			mode="aspectFill" />
		<page-head :title="'个人中心'" :bgColor="`transparent`" :headtype="1"></page-head>
		<view class="topblock" style="height:320rpx;" :style="{ paddingTop: (stausBarHeight*1) + 'px'}">
			<!-- <view class="topblockbottom"></view> -->
			<view class="head marginAuto">
				<view class="headl" v-if="!usermsg.id">
					<view class="headlimg">
						<image class="headlimg" src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="headmsg" @click="wxlogin()">
						<view class="headmsgname" style="margin-top:30rpx;font-size:36rpx;">登录</view>
					</view>
				</view>
				<view class="headl" v-if="!!usermsg.id" @click.stop="navigate('/pages/my/setusermsg')">
					<view class="headlimg">
						<image class="headlimg" v-if="usermsg.avatar != ''" :src="usermsg.avatar"
							mode="aspectFill">
						</image>
						<image class="headlimg" v-if="usermsg.avatar == ''" src="@/static/logo.png" mode="aspectFill">
						</image>
					</view>
					<view class="headmsg">
						<view class="headmsgname">{{ usermsg.nick || '玖福珠宝' }}</view>
						<view class="headmsglabel">
							<view class="headmsglabel-each" v-if="usermsg.level_id == 1">{{ usermsg.level_name }}</view>
							<view class="headmsglabel-each" v-if="usermsg.level_id == 2" @click.stop="vippop=true">{{ usermsg.level_name }}</view>
							<view class="headmsglabel-each" v-if="usermsg.level_id == 3" @click.stop="partnerpop=true">{{ usermsg.level_name }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="topnav marginAuto">
				<view class="topnaveach" @click="navigate('/pages/my/integral')">
					<view class="topnaveach-num">{{ usermsg.integral || 0 }}</view>
					<view class="topnaveach-title">积分</view>
				</view>
				<view class="topnaveach" @click="navigate('/pages/my/discount')">
					<view class="topnaveach-num">{{ usermsg.coupon || 0 }}</view>
					<view class="topnaveach-title">优惠券</view>
				</view>
				<view class="topnaveach" @click="navigate('/pages/my/collect')">
					<view class="topnaveach-num">{{ usermsg.collection || 0 }}</view>
					<view class="topnaveach-title">收藏</view>
				</view>
			</view>
		</view>

		<view class="card" style="margin-top:360rpx;">
			<view class="cardmain blockbg marginAuto">
				<view class="cardmainl">
					<view class="card-title">
						<view>我的钱包(元)</view>
						<view class="mainColor" style="margin-left:20rpx;display:flex;"
							@click="navigate('/pages/my/withmx')">
							<text>明细</text>
							<u-icon name="arrow-right" color="#9E190F" size="26"></u-icon>
						</view>
					</view>
					<view class="card-moeny">
						<text style="font-size:36rpx;">{{ usermsg.money || 0.00 }}</text>
					</view>
				</view>
				<view class="with" @click="navigate('/pages/my/with')">提现</view>
			</view>
		</view>
		<view class="order blockbg marginAuto" style="margin-top:20rpx;">
			<view class="funeach">
				<view class="funeachl">我的订单</view>
				<view class="funeachr flex" @click="navigate('/pages/order/list','orderstus=0')">
					<text style="font-size:24rpx;color:#666666">全部</text>
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="ordermain flex">
				<view class="ordereach" @click="navigate('/pages/order/list','orderstus=1')">
					<view class="ordericon marginAuto">
						<view class="orderum" v-if="ordernum.order_pay > 0">{{ ordernum.order_pay }}</view>
						<image style="width: 40rpx;height: 40rpx;" src="@/static/my/order1.png" mode="heightFix">
						</image>
					</view>
					<view class="ordertitle">待支付</view>
				</view>
				<view class="ordereach" @click="navigate('/pages/order/list','orderstus=2')">
					<view class="ordericon marginAuto">
						<view class="orderum" v-if="ordernum.order_no_delivery > 0">{{ ordernum.order_no_delivery }}
						</view>
						<image style="width: 40rpx;height: 40rpx;" src="@/static/my/order2.png" mode="heightFix">
						</image>
					</view>
					<view class="ordertitle">待发货</view>
				</view>
				<view class="ordereach" @click="navigate('/pages/order/list','orderstus=3')">
					<view class="ordericon marginAuto">
						<view class="orderum" v-if="ordernum.order_verifier > 0">{{ ordernum.order_verifier }}</view>
						<image style="width: 40rpx;height: 40rpx;" src="@/static/my/order3.png" mode="heightFix">
						</image>
					</view>
					<view class="ordertitle">待核销</view>
				</view>
				<view class="ordereach" @click="navigate('/pages/order/list','orderstus=4')">
					<view class="ordericon marginAuto">
						<view class="orderum" v-if="ordernum.order_delivery > 0">{{ ordernum.order_delivery }}</view>
						<image style="width: 40rpx;height: 40rpx;" src="@/static/my/order4.png" mode="heightFix">
						</image>
					</view>
					<view class="ordertitle">待收货</view>
				</view>
				<view class="ordereach" @click="navigate('/pages/order/list','orderstus=5')">
					<view class="ordericon marginAuto">
						<view class="orderum" v-if="ordernum.order_arrive > 0">{{ ordernum.order_arrive }}</view>
						<image style="width: 40rpx;height: 40rpx;" src="@/static/my/order5.png" mode="heightFix">
						</image>
					</view>
					<view class="ordertitle">已完成</view>
				</view>
			</view>
		</view>
		<view class="fun blockbg marginAuto">
			<view class="funeach" @click="navigate('/pages/order/integral/list_int')">
				<view class="funeachl">兑换记录</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="funeach" @click="navigate('/pages/my/partner')">
				<view class="funeachl">成为合伙人</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="funeach" @click="navigate('/pages/my/invite')">
				<view class="funeachl">邀请好友</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="funeach" @click="navigate('/pages/my/invitelist')">
				<view class="funeachl">我的邀请</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="funeach" @click="navigate('/pages/my/sitelist')">
				<view class="funeachl">地址管理</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="funeach" @click="navigate('/pages/my/about')">
				<view class="funeachl">关于我们</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
			<view class="funeach" @click="navigate('/pages/my/agr')">
				<view class="funeachl">用户协议</view>
				<view class="funeachr">
					<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
				</view>
			</view>
		</view>

		<view class="cancel mainBg marginAuto" style="margin-top:60rpx;" @click="cancelfun" v-if="usermsg.is_verifier == 1">
			<view class="marginAuto" style="display: flex;">
				<u-icon name="scan" color="#fff" size="40"></u-icon>
				<text>核销</text>
			</view>
		</view>
		<view class="quit marginAuto" style="width:90%;margin:40rpx auto;">
			<u-button @click="quitfun" color="#DEDEDE" class="quit" text="退出登录" :customStyle="{
				color:'#999',
				borderRadius:'20rpx',
				height:'90rpx',
				lineHeight:'90rpx'
				}"></u-button>
		</view>
		<u-popup :show="partnerpop" :bgColor="`transparent`" mode="center" round="40" @close="partnerpop = false">
			<view class="expl">
				<image class="explbg" src="@/static/my/mypopbg.png" mode="widthFix"></image>
				<view class="expltitle marginAuto">
					<view class="expltitletxt">合伙人说明</view>
					<view class="expltitleicon" @click="partnerpop = false">
						<u-icon name="close" color="#999999" size="50"></u-icon>
					</view>
				</view>
				<view class="expltblock marginAuto">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
						<u-parse :content="partdata"></u-parse>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- <view class="explb-each">合伙人分佣说明：</view>
		<view class="explb-each">1、升级为合伙人后，分佣奖励脱离个人邀请号分佣规则。</view>
		<view class="explb-each">2、分佣结算周期：2个月结算一次。</view>
		<view class="explb-each">3、分佣比例：团队营业额在万-2万的分佣比例是5%，2万-3万的分佣比例是8%，3万-5万的分佣比例是10%。</view> -->
		<u-popup :show="vippop" :bgColor="`transparent`" mode="center" round="40" @close="vippop = false">
			<view class="expl">
				<image class="explbg" src="@/static/my/mypopbg.png" mode="widthFix"></image>
				<view class="expltitle marginAuto">
					<view class="expltitletxt">会员说明</view>
					<view class="expltitleicon" @click="vippop = false">
						<u-icon name="close" color="#999999" size="50"></u-icon>
					</view>
				</view>
				<view class="expltblock marginAuto">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;">
						<u-parse :content="vipdata"></u-parse>
					</scroll-view>
					<!-- <view class="explb-each">
						<view>普通会员：</view>
						<view>用户注册即成为普通会员</view>
					</view>
					<view class="explb-each">
						<view>VIP会员：</view>
						<view>邀请好友完成注册即升级为VIP会员</view>
					</view>
					<view class="explb-each">
						<view>福利：</view>
						<view>1、可获得10积分</view>
						<view>2、一张无门槛代金券 </view>
						<view>3、好友下单可获得订单1%的分红</view>
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stausBarHeight: uni.getStorageSync('ClientRect').top + uni.getStorageSync('ClientRect').height + 10,
				URLimg: this.URLimg,
				apifun: this.apifun,
				usermsg: {
					id: '',
					avatar: '',
					nick: "",
					mobile: "立即开启上们之旅吧~~"
				},
				ordernum: {},
				partnerpop: false,
				vippop: false,
				partdata: '',
				vipdata: '',
				invite_code:''
			};
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.userinfofun()
			}
		},
		onLoad(option) {
			this.invite_code = decodeURIComponent(option.scene);
			this.vipmsgfun();
			this.partmsgfun()
		},
		methods: {
			wxlogin() {
				uni.login({
					provider: 'weixin', //使用微信登录
					scopes: 'auth_user',
					success: (loginRes) => {
						this.wxloginfun(loginRes.code);
					},
				})
			},
			wxloginfun(code) {
				let sendData = {
					code: code,
					invite_code:this.invite_code
				};
				this.apifun.unirequest('/api/Wx/getAccessToken', 'post', sendData, (res) => {
					// console.log(res)
					if (res.code === 200) {
						let datas = res.data;
						uni.setStorageSync('token', datas.token)
						this.apifun.toast('登录成功');
						this.userinfofun();
					} else {
						this.apifun.toast(res.msg)
					}
				}, true)
			},
			userinfofun() {
				this.apifun.unirequest('/api/User/getUserInfo', 'post', {}, (res) => {
					// console.log(res)
					if (res.code === 200) {
						let datas = res.data;
						uni.setStorageSync('usermsg', datas);
						this.usermsg = datas;
						this.ordernum = datas.order;
					} else {
						this.apifun.toast(res.msg)
					}
				}, false, true)
			},
			cancelfun() { // 核销
				let that = this;
				uni.scanCode({
					success: function(res) {
						// console.log('条码内容：' + res.result);
						that.scancodeend(res.result)
					}
				});
				// uni.showActionSheet({
				// 	itemList: ['线上核销', '到店核销'],
				// 	success: function (res) {
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 	},
				// 	fail: function (res) {
				// 		console.log(res.errMsg);
				// 	}
				// });
			},
			scancodeend(result) { // 扫码结果
				let sendData = {
					order_sn: result
				};
				this.apifun.unirequest('/api/order/verifierOrder', 'post', sendData, (res) => {
					console.log(res)
					if (res.code === 200) {
						let datas = res.data;
						this.apifun.toast('核销成功');
					} else {
						this.apifun.toast(res.msg)
					}
				})
			},
			vipmsgfun() { // vip说明
				let sendData = {
					field: 'member_description'
				};
				this.apifun.unirequest('/api/index/getConfigInfo', 'post', sendData, (res) => {
					// console.log(res)
					if (res.code === 200) {
						let datas = res.data;
						this.vipdata = datas;
					} else {
						this.apifun.toast(res.msg)
					}
				}, true)
			},
			partmsgfun() { // 合伙人说明
				let sendData = {
					field: 'partner_description'
				};
				this.apifun.unirequest('/api/index/getConfigInfo', 'post', sendData, (res) => {
					// console.log(res)
					if (res.code === 200) {
						let datas = res.data;
						this.partdata = datas;
					} else {
						this.apifun.toast(res.msg)
					}
				}, true)
			},
			quitfun() { // 退出登录
				this.apifun.showModal('退出登录', '确定要退出登录吗？', () => {
					uni.removeStorageSync('token');
					uni.removeStorageSync('usermsg');
					this.usermsg = {
						id: '',
						avatar: '',
						nick: "",
						mobile: "立即开启上们之旅吧~~"
					};
				})
			},
			navigate(path, params) {
				if (!uni.getStorageSync('token')) {
					this.apifun.toast('请登录后查看')
					return false
				}
				this.apifun.navigate(path, params)
			}
		},
		onShareTimeline(res) {
			return {
				title: '玖福珠宝',
				imageUrl: "/static/public/logo.png"
			}
		},
		onShareAppMessage(res) {
			return {
				title: '玖福珠宝',
				path: '/pages/tabbar/index',
				imageUrl: "/static/logo.png"
			}
		},
		// onReachBottom() {
		// 	this.page++;
		// 	this.initData();
		// },
		onPullDownRefresh() {
			// this.page = 1;
			// this.evdata = [];
			// this.initData();
			this.userinfofun();
			uni.stopPullDownRefresh();
		},

	};
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 150rpx;
	}

	.mytopbg,
	.topblock {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 10;
	}

	.topblockbottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 20rpx;
		z-index: 11;
		background-color: #F4F5F6;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.blockbg {
		width: 640rpx;
		border-radius: 18rpx;
		background-color: #fff;
		padding: 24rpx;
	}

	/* head */
	.head {
		position: relative;
		z-index: 150;
		width: 90%;
		padding: 20rpx 0 46rpx;
		display: flex;
		justify-content: space-between;

		.headl {
			display: flex;

			.headlimg {
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.headmsg {
				margin-top: 20rpx;
				margin-left: 20rpx;

				.headmsgname {
					font-size: 30rpx;
					color: #333333;
					font-weight: 400;
				}

				.headmsglabel {
					margin-top: 10rpx;
					display: flex;

					.headmsglabel-each {
						padding: 0 20rpx;
						line-height: 40rpx;
						border-radius: 10rpx;
						border: 1px solid #D31E11;
						margin-right: 34rpx;
						color: #D31E11;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	/* topnav */
	.topnav {
		width: 90%;
		display: flex;
		justify-content: space-between;

		.topnaveach {
			width: 30%;
			text-align: center;

			.topnaveach-num {
				line-height: 50rpx;
				color: #D31E11;
				font-size: 48rpx;
			}

			.topnaveach-title {
				margin-top: 10rpx;
				color: #333333;
				font-size: 28rpx;
			}
		}
	}


	/* card */
	.card {
		position: relative;
		width: 100%;

		.cardmain {
			padding: 22rpx 24rpx;
			background: linear-gradient(to right, #6C6C6C, #3B3B3B);
			display: flex;
			justify-content: space-between;

			.card-title {
				display: flex;
				color: #fff;
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.card-moeny {
				color: #fff;
				line-height: 80rpx;
			}

			.with {
				width: 144rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #242424;
				color: #fff;
				font-size: 30rpx;
				border-radius: 100rpx;
				margin-top: 35rpx;
			}
		}
	}

	// order
	.order {
		.funeach {
			display: flex;
			justify-content: space-between;
			line-height: 40rpx;

			.funeachl {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.ordermain {
			justify-content: space-between;
			padding: 60rpx 0 0rpx;

			.ordereach {
				width: 100rpx;

				.ordericon {
					position: relative;
					width: 50rpx;
					height: 50rpx;
					text-align: center;

					.orderum {
						position: absolute;
						right: -32rpx;
						top: -32rpx;
						width: 32rpx;
						height: 32rpx;
						line-height: 32rpx;
						border-radius: 16rpx;
						border-bottom-left-radius: 0;
						background-color: #E7390F;
						color: #fff;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.ordertitle {
					line-height: 44rpx;
					color: #333333;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}

	/* fun */
	.fun {
		margin-top: 22rpx;

		.funeach {
			display: flex;
			justify-content: space-between;
			padding: 26rpx 0;
			line-height: 40rpx;

			.funeachl {
				font-size: 30rpx;
				color: #333333;
			}
		}
	}

	// 核销
	.cancel {
		width: 90%;
		display: flex;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 20rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.quit {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
	}

	// popup
	.expl {
		position:relative;
		width: 620rpx;
		height: 710rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;

		.explbg {
			position: absolute;
			top: 0;
			width: 100%;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
		}

		.expltitle {
			position:absolute;
			top: 0;
			left: 0;
			z-index:20;
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #333333;
			font-size: 36rpx;
			margin-top: 46rpx;

			.expltitleicon {
				position: absolute;
				right: 0;
				top: 15rpx;
			}
		}

		.expltblock {
			position: relative;
			z-index: 10;
			top: 130rpx;
			width: 90%;
			height: 550rpx;
			overflow: hidden;

			.explb-each {
				margin-top: 40rpx;
				color: #666666;
				font-size: 28rpx;
				line-height: 44rpx;
			}
		}
	}
</style>